<template>
  <div id="home">
      <header class="wos-flex wos-flex-between">
        <div class="wos-flex">
          <div><i class="iconfont icon-logo"></i></div>
          <div class="title hover">管理系统</div>
        </div>
        <div class="wos-flex nav">
          <div class="user hover ">
            <a-dropdown>
              <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                <span class="hover">
                <span class="wos-grey iconfont icon-yonghu" ></span>
                <span class="wos-grey hover">你好, admin</span>
                <span class="wos-grey hover iconfont icon-xialajiantou3" style="font-size:0.75rem"></span>
                </span>
              </a>
              <a-menu slot="overlay">
                <a-sub-menu key="test" title="快速向导">
                  <a-menu-item>视频支存</a-menu-item>
                  <a-menu-item>AI回放</a-menu-item>
                  <a-menu-item>IP SAN</a-menu-item>
                </a-sub-menu>
                <a-menu-item @click="go('/')">退出</a-menu-item>
              </a-menu>
            </a-dropdown>
          </div>
          <div class="hover navline">报告</div>
          <div class="hover navline">版本</div>
          <div class="hover navline" >帮助</div>
        </div>
      </header>
      <main class="wos-flex">
        <nav>
          <ul>
            <li
                v-for="(item, index) in menu"
                :key="index"
                @click="menuIndex = item.id"
            >
              <div>
                <i class="icon iconfont" :class="item.icon"></i>
                <span>{{item.name}}</span>
                <i class="iconfont icon-xialajiantou1"></i>
              </div>
            <ul v-show="menuIndex == item.id">
              <ol
                  v-for="(i, index) in item.children"
                  :key="index"
                  :class="menuChildrenIndex == i.id ? 'active' : ''"
                  @click="nodeClick(i)"
              >
                <i class="iconfont icon-xiangyou1"></i>
                <span>{{i.name}}</span>
              </ol>
            </ul>
            </li>
          </ul>
        </nav>
        <div class="wos-flex-auto content">
          <router-view/>
        </div>
      </main>
      <footer class="wos-align-center">
        <i class="iconfont icon-privatelogo"></i>
        <span>2020.All.Reserved. | Design By UED </span>
      </footer>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data:function(){
    return {
      menu:this.$config.menu,
      menuIndex:"1",
      menuChildrenIndex:"11"
    }
  },
  mounted() {
    this.go('/sys/server')
  },
  methods:{
    nodeClick(item){
      this.menuChildrenIndex = item.id
      this.go(item.router)
      //跳转路由
    }
  }
}
</script>

<style lang="less" scoped>
  #home{
    background-color: #EEEEFE;
    min-width: 100vw;
  }
  footer{
    height: 150px;
    line-height: 150px;
    color: #464E4E;
    i{
      font-size: 5rem;
      position: absolute;
      margin-left: -88px;
    }
  }
  main{
    width: 96vw;
    min-height: 800px;
    margin: 2vw auto auto auto;
    background-color: @background-blue;
    nav{
      min-height: 500px;
      color: #7892B4;
      padding:20px 0;
      li{
        width: 200px;

        div{
          padding: 0 20px;
          height: 55px;
          width: 100%;
          line-height: 55px;
          .icon{
            font-size: 1.2rem;
            position: absolute;
            margin-top: -2px;
          }
          span{
            padding-left: 2rem;
          }
          .icon-xialajiantou1{
            float: right;
            font-size: 0.8rem;
          }
        }
      }
      ol{
        height: 35px;
        line-height: 35px;
        padding-left: 35px;
        i{
          margin-right: 5px;
        }
      }
      .active{
        background-color: @active-blue;
        color:#FFFFFF
      }
      ul ul{
        margin-bottom: 10px;
      }
      li div:hover,
      ol:hover{
        color: #FFFFFF;
        cursor: pointer;
      }
    }
    .content{
      min-height: 700px;
      background-color: #FFFFFF;
    }
  }
  header{
    height: 50px;
    width: 100vw;
    background-color: @background-blue;
    padding: 20px;
    color:#9E9E9D;
    i{
      font-size: 4rem;
      position: absolute;
      top:-1.5rem;
      color: #FFFFFF;
    }
    .title{
      font-size: 1rem;
      position: absolute;
      margin-left: 80px;
      margin-top: -8px;
      border-left: 1px solid #FFFFFF;
      padding-left: 20px;
      height: 20px;
    }
    .nav{

      div{
        padding: 0 10px;
        font-size: 0.75rem;
      }
      .user{
        position: absolute;
        margin-top: -5px;
        margin-left: -120px;
      }

      .navline{
        height: 16px;
        border-left: 1px solid #9E9E9D;
      }
    }
    .hover:hover{
      color:#FFFFFF;
      cursor: pointer;
    }
    a{
      color: #FFFFFF;
    }
  }
</style>
